<!-- 购物车 -->
<template>
	<view class="page_box">
		<view class="title-h1">驗證碼登錄</view>
		<!-- <view class="title-h7">首次登錄自動註冊</view> -->
		<view class="input-row" style="margin-top: 60px;">
			<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model.trim="model.phone" type="number"></u-input>
		</view>
		<view class="input-code-row">
			<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model.trim="model.code" type="number"></u-input>
			<view class="span-code" @tap="handleGetCode()">{{ count==60?codeText:`${count}s` }}</view>
		</view>
		<view class="sel-row">
			<u-checkbox v-model="protocol" shape="circle" active-color="#1C7AF7"></u-checkbox>
			<view>已閱讀並同意<span @tap="handleyhxy()">《用戶協議》</span>和<span @tap="handleysqbhzc()">《隱私權保護政策》</span></view>
		</view>
		<view class="btn-row" @tap="handleUserLogin()">登錄</view>
	</view>
</template>

<script>
	import { userLogin,userMobileLogin } from '../../utils/api'
	import { smsSend } from '../../utils/userApi'
	export default {
		components: { },
		data() {
			return {
				protocol:true,
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model:{
					phone:'',
					code:'',
				},
				codeText:'獲取驗證碼',
				count:60,
				timer:null,
			}
		},
		computed: {
		},
		onShow() {
		},
		onHide() {
			this.clearCountdown()
		},
		methods: {
			handleyhxy(){
				uni.navigateTo({
					url: '/pages/user/userAgreement'
				})
			},
			handleysqbhzc(){
				uni.navigateTo({
					url: '/pages/user/privacyProtection'
				})
			},
			resetCountdown() {
				this.count = 60;
				this.clearCountdown();
			},
			clearCountdown() {
				clearInterval(this.timer)
				this.timer = null;
			},
			handleUserLogin(){
				if(this.model.phone){
					if(this.model.code){
						this.submitLogin()
					}else{
						uni.showToast({
							title: '请输入验证码',
							duration: 2000,
							icon:'none'
						});
					}
				}else{
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
							icon:'none'
					});
				}
			},
			startCountdown(){
				this.timer = setInterval(() => {
					if (this.count > 0) {
						this.count -= 1;
					} else {
						this.clearCountdown();
					}
				}, 1000);
			},
			async handleGetCode(){
				if(this.model.phone){
					this.startCountdown()
					let res = await smsSend({mobile:this.model.phone,event:'mobilelogin'})
					if(res.code==1){
						uni.showToast({
							title: '已發送',
							duration: 2000,
							icon:'none'
						})	
					}else{
						uni.showToast({
							title: res.msg||'系統異常',
							duration: 2000,
							icon:'none'
						})
					}
				}else{
					uni.showToast({
						title: '請輸入驗證碼',
						duration: 2000,
						icon:'none'
					})
				}
			},
			async submitLogin() {
				let res = await userMobileLogin({mobile:this.model.phone,captcha:this.model.code})
				// let res = await userLogin({account:this.model.phone,password:this.model.code})
				if(res.code==1){
					uni.showToast({
						icon: 'none',
						title: '登陆成功',
						duration: 2000
					})
					
					uni.setStorageSync('userInfo',res.data.userinfo)
					uni.setStorageSync('token',res.data.userinfo.token)
					uni.switchTab({ url: '/pages/index/index' })
				}else{
					uni.showToast({
						title: res.msg||'登陆失败',
						duration: 2000,
						icon:'none'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
.page_box{
  width: 100vw;
	height: 100vh;
	background-image: url('../../static/images/login/bg_login.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.title-h1{
	height: 36px;
	font-weight: 600;
	font-size: 25px;
	color: #242E59;
	line-height: 36px;
	padding: 50px 0 10px 30px;
}
.title-h7{
	height: 21px;
	font-size: 15px;
	color: #242E59;
	line-height: 21px;
	padding: 0 0 35px 30px;
}
::v-deep .sel-row{
	height: 18px;
	font-size: 13px;
	color: #666666;
	line-height: 18px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0 0 0 30px;
	span{
		color: #1C7AF7;
	}
	.u-checkbox__label{
		margin: 0 4px 0 0;
	}
}
.btn-row{
	width: 315px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	border-radius: 28px;
	color: #fff;
	font-size: 18px;
	background: linear-gradient( 90deg, #0ABBFA 0%, #0486F4 100%);
	margin: 40px auto 0;
}
::v-deep .input-row{
	width: 315px;
	height: 55px;
	background: rgba(255,255,255,0.5);
	border-radius: 28px;
	border: 1px solid #FFFFFF;
	margin: 0 auto 20px;
	uni-input{
		padding: 0 10px;
		min-height: 55px;
		height: 55px;
		margin-top: 0px;
	}
	.u-input{
		height: 55px;
		line-height: 55px;
	}
}
::v-deep .input-code-row{
	width: 315px;
	height: 55px;
	background: rgba(255,255,255,0.5);
	border-radius: 28px;
	border: 1px solid #FFFFFF;
	margin: 0 auto 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	uni-input{
		padding: 0 10px;
		min-height: 55px;
		height: 55px;
		display: block;
		width: 64%;
	}
	.u-input{
		height: 55px;
		line-height: 55px;
	}
	.span-code{
		width: 36%;
		text-align: center;
		line-height: 55px;
		font-size: 15px;
		color: #5C36FF;
	}
}
</style>
